<template>
	<view class="tabBarDad">
		<view class="tabBar">
			<view class="item" @click="toIndex('0')">
				<image v-if="selected == 0" src="@/static/index1.png" mode="scaleToFill"></image>
				<image v-else src="@/static/index2.png" mode="scaleToFill"></image>
				<text :style="{color: selected == 0 ? '#333' : '#8D8F90'}">首页</text>
			</view>
			<view class="item" @click="toIndex('1')">
				<image v-if="selected == 1" src="@/static/works1.png" mode="scaleToFill"></image>
				<image v-else src="@/static/works2.png" mode="scaleToFill"></image>
				<text :style="{color: selected == 1 ? '#333' : '#8D8F90'}">作品</text>
			</view>
			<view class="item" @click="toIndex('2')">
				<view v-if="count_nored" class="dot">
					{{count_nored < 99 ? count_nored :"99"}}
				</view>
				<image v-if="selected == 2" src="@/static/message1.png" mode="scaleToFill"></image>
				<image v-else src="@/static/message2.png" mode="scaleToFill"></image>
				<text :style="{color: selected == 2 ? '#333' : '#8D8F90'}">消息</text>
			</view>
			<view class="item" @click="toIndex('3')">
				<image v-if="selected == 3" src="@/static/my1.png" mode="scaleToFill"></image>
				<image v-else src="@/static/my2.png" mode="scaleToFill"></image>
				<text :style="{color: selected == 3 ? '#333' : '#8D8F90'}">我的</text>
			</view>
		</view>
		<!-- <u-safe-bottom></u-safe-bottom> -->
		<!-- <view class="safe-bottom"></view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		props: {
			select: "",
		},
		data() {
			return {
				selected: 0,
			};
		},
		computed: {
			...mapState(["count_nored"]),
		},
		created() {
			uni.hideTabBar({});
			if (this.select) {
				this.selected = parseInt(this.select);
			}
		},
		methods: {
			async toIndex(index) {
				uni.switchTab({
					url: {
						0: "/pages/index/index",
						1: "/pages/works/works",
						2: "/pages/message/message",
						3: "/pages/my/my",
					} [index],
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tabBarDad {
		position: fixed;
		bottom: 68rpx;
		left: 0;
		z-index: 99;
		width: 100%;
	}

	.tabBar {
		display: flex;
		justify-content: space-between;
		align-items: center;

		width: 686rpx;
		;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 76rpx;
		margin: auto;
		box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0, 0, 0, 0.05);

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			position: relative;

			.dot {
				position: absolute;
				top: -8rpx;
				right: calc(50% - 40rpx);
				z-index: 99;
				padding: 0 8rpx;
				height: 24rpx;
				background: #FF504A;
				border: 1rpx solid #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 0rpx;
				font-weight: bold;
				font-size: 16rpx;
				color: #FFFFFF;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 8rpx;
			}

			text {
				font-weight: 500;
				font-size: 20rpx;
				color: #8D8F90;
			}
		}
	}

	.safe-bottom {
		width: 100%;
		height: 40rpx;
		background-color: #f3f3f3;
	}
</style>